<template>
  <div class="timeline-sandbox">
    <div class="image-slider">
      <swiper
        :slides-per-view="5"
        centeredSlides
        @swiper="onSwiperReady"
        @slide-change="onSlideChange"
      >
        <swiper-slide
          v-for="(item, index) in timelineData"
          :key="item.id"
          :class="{ active: index === activeIndex }"
        >
          <img :src="item.image" class="slide-img" />
        </swiper-slide>
      </swiper>
    </div>

    <div class="time-axis">
      <div
        v-for="(item, index) in timelineData"
        :key="item.id"
        :class="['time-node', { active: index === activeIndex }]"
        @click="goToSlide(index)"
      >
        <div class="time">{{ item.time }}</div>
        <div class="card">
          <div>任务编号: {{ item.id }}</div>
          <div>任务类型: {{ item.type }}</div>
          <div>事件: {{ item.title }}</div>
          <div>时间: {{ item.time }}</div>
          <div>详情: {{ item.detail }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";

const swiperRef = ref(null);
// const activeIndex = ref(0)

const timelineData = [
  {
    id: "RW-20241011-0001",
    time: "2025-03-11 15:12:54",
    type: "应急演练",
    title: "三人晕倒",
    detail: "在某某地铁站突发事件",
    image: "https://picsum.photos/200",
  },
  {
    id: "RW-20241011-0002",
    time: "2025-03-11 15:13:30",
    type: "医疗急救",
    title: "AED 施救",
    detail: "某乘客突发昏迷",
    image: "https://picsum.photos/200",
  },
  {
    id: "RW-20241011-0003",
    time: "2025-03-11 15:14:10",
    type: "警务协同",
    title: "警察到场",
    detail: "协助处理事件",
    image: "https://picsum.photos/200",
  },
  {
    id: "RW-20241011-0004",
    time: "2025-03-11 15:14:50",
    type: "应急演练",
    title: "三人晕倒",
    detail: "在某某地铁站突发事件",
    image: "https://picsum.photos/200",
  },
  {
    id: "RW-20241011-0005",
    time: "2025-03-11 15:15:30",
    type: "医疗急救",
    title: "AED 施救",
    detail: "某乘客突发昏迷",
    image: "https://picsum.photos/200",
  },
  {
    id: "RW-20241011-0006",
    time: "2025-03-11 15:16:10",
    type: "警务协同",
    title: "警察到场",
    detail: "协助处理事件",
    image: "https://picsum.photos/200",
  },
  {
    id: "RW-20241011-0007",
    time: "2025-03-11 15:16:50",
    type: "应急演练",
    title: "三人晕倒",
    detail: "在某某地铁站突发事件",
    image: "https://picsum.photos/200",
  },
  {
    id: "RW-20241011-0008",
    time: "2025-03-11 15:17:30",
    type: "医疗急救",
    title: "AED 施救",
    detail: "某乘客突发昏迷",
    image: "https://picsum.photos/200",
  },
  {
    id: "RW-20241011-0009",
    time: "2025-03-11 15:18:10",
    type: "警务协同",
    title: "警察到场",
    detail: "协助处理事件",
    image: "https://picsum.photos/200",
  },
];
const swiperInstance = ref(null);
const activeIndex = ref(0);

function onSwiperReady(swiper) {
  swiperInstance.value = swiper;
}

function onSlideChange() {
  if (swiperInstance.value) {
    activeIndex.value = swiperInstance.value.realIndex;
  }
}

function goToSlide(index) {
  if (swiperInstance.value) {
    swiperInstance.value.slideTo(index);
    activeIndex.value = index;
  }
}
</script>

<style scoped>
.timeline-sandbox {
  padding: 20px;
  color: #fff;
  background: #001d3a;
}

.image-slider {
  width: 100%;
  margin-bottom: 20px;
}

.swiper-slide {
  opacity: 0.4;
  transition: 0.3s;
  transform: scale(0.8);
}

.swiper-slide.active {
  z-index: 10;
  opacity: 1;
  transform: scale(1.2);
}

.slide-img {
  width: 100%;
  border-radius: 8px;
}

.time-axis {
  display: flex;
  gap: 12px;
  overflow-x: auto;
}

.time-node {
  min-width: 200px;
  padding: 10px;
  cursor: pointer;
  background: #0d2b50;
  border-radius: 8px;
  transition: 0.3s;
}

.time-node.active {
  background: #1e90ff;
}

.card {
  margin-top: 6px;
  font-size: 12px;
}
</style>
